/**
 * Created with Vim7.3 Mac
 * @fileOverview :
 * @author : Lyle lylechen2014@gmail.com
 * @since : 2016-06-28 21:33:51
 * @filename : src/style/app.style.js
 * @version :
 * @description :
 */

import {Image} from 'react-native';
import Utils from '../tools/utils';
let { width, height } = Utils.size;


export const AppStyle = {

    container: {
        flex: 1,
        flexDirection: 'row',
    },

    containerContent: {
        flex: 1,
    },

    navigationBarStyleHide: {
        flex: 1,
        height: 0,
        opacity: 0,
        width:width,
        alignItems: 'center',
        backgroundColor: '#56ade0',
    },

    navigationBarStyleShow: {
        flex: 1,
        height: 60,
        opacity: 1,
        width:width,
        alignItems: 'center',
        backgroundColor: '#56ade0',
    },

    title: {
        alignItems: 'center',
        justifyContent: 'center',
        height: 35,
    },

    button: {
        width: 40,
        height: 40,
        alignItems: 'center',
        justifyContent: 'center',
    },

    buttonText: {
        fontSize: 18,
        color: '#FFFFFF',
        fontWeight: '400'
    },

    icon: {
        color: '#fff',
    },

    sceneStyle : {
        paddingTop: 60,
        backgroundColor: '#56ade0',
    }
};

export const MenuStyle = {
    menu: {
        width: 250,
        height: height,
        backgroundColor:'#fbfbfb',
    },

    userNavMenu: {
      marginTop:10,
    },

    userNavMenuLi: {
      height:50,
      flexDirection: 'row',
      alignItems : 'center',
    },

    userNavMenuLiAction: {
      height:50,
      flexDirection: 'row',
      backgroundColor:'#3FAFE4',
      alignItems : 'center',
    },

    userNavMenuLiActiTxt: {
      color:'#5c5c5d',
      marginLeft:15,
    },

    userNavMenuLiActionTxt: {
      color:'#ffffff',
      marginLeft:15,
    },

    userNavMenuLiIco: {
      width:15,
      height:15,
      marginLeft:25,
    },
};

export const IndexStyle = {

    container: {
        flex: 1,
    },

    imgbg: {
        // resizeMode:Image.resizeMode.cover,
        width:width,
        height:height,
        position:'absolute',
        top:-60,
      },

      box: {
        left:0,
        flex:1,
      },

      logoIndex: {
        marginTop: 100,
        width: width,
    },

    logo: {
        // resizeMode:Image.resizeMode.contain,
        width: width,
        height: 40,
    },

    desIndex: {
        marginTop: 30,
        width:width,
      },

      desText: {
         color:'#fff',
         textAlign: 'center',
         fontSize:15,
         backgroundColor: 'transparent',
      },

      buttonIndex: {
        position:'absolute',
        left:0,
        right:0,
        bottom:0,
        width:width,
        height:200,
        flex:1,
        flexDirection:'column',
        alignItems:'center',
      },

      signup:{
        width:180,
        height:40,
        lineHeight:30,
        backgroundColor:'rgba(61,174,227,0.8)',

        textAlign: 'center',
        fontSize: 15,
    },

    buttonIndex: {
        position: 'absolute',
        left: 0,
        right: 0,
        bottom: 0,
        width: width,
        height: 200,
        flex: 1,
        flexDirection: 'column',
        alignItems: 'center',
    },

    signup: {
        width: 180,
        height: 40,
        lineHeight: 30,
        backgroundColor: 'rgba(61,174,227,0.8)',
        textAlign: 'center',
        fontSize: 14,
        borderRadius: 5,
        color: 'rgba(255,255,255,1)',
        marginBottom: 20,
    },

    login: {
        width: 180,
        height: 40,
        lineHeight: 30,
        backgroundColor: 'rgba(255,255,255,0.8)',
        textAlign: 'center',
        fontSize: 14,
        borderRadius: 5,
        color: 'rgba(61,174,227,1)',
        justifyContent: 'center'
    },
};

export const RegisterStyle = {

    container: {
        flex: 1,
        backgroundColor:'#f5f7f8',
        width:width,
      },

      tabA: {
        paddingTop:20,
        paddingLeft:20,
        paddingRight:20
      },

      tabA_des: {
        flexDirection:'row',
        justifyContent:'center',
      },

      tabA_line: {
        position:'absolute',
        top:20,
        left:0,
        right:0,
        borderTopWidth:1,
        borderColor:'#ccc',
      },

      tabA_text: {
        color:'#666',
        height:50,
        width:160,
        textAlign:'center',
        lineHeight:30,
        fontSize:16,
      },

      tabA_myGender: {
        flexDirection:'row',
        justifyContent:'space-between',
        height:45,
      },

      tabA_myGenderText: {
        color:'#666',
        lineHeight:25,
      },

      tabA_genderTab: {
         flexDirection:'row',
         justifyContent:'space-between',
         borderRadius:3,
         borderWidth:1,
         borderColor:'#2174C6',
         height:27,
         overflow:'hidden'
      },

      genderButtonView: {
         borderLeftWidth:1,
         borderLeftColor:'#2174C6',
      },

      genderButton: {
         height:25,
         width:70,
         borderColor:'#2174C6',
         textAlign:'center',
         lineHeight:20,
         color:'#2174C6',
      },

      genderAction: {
          backgroundColor:'#2174C6',
          color:'#fff',
      },

      input: {
        backgroundColor: '#fff',
        borderWidth: 1,
        borderColor: '#ccc',
        borderRadius: 3,
        height: 40,
        paddingLeft: 40,
        paddingRight: 10,
        fontSize: 14,
    },

    inputError: {
        borderColor: '#ff0000',
    },

    inputText: {
        marginTop: 10,
        marginBottom: 10,
    },

    datePickerContainer: {
        flex: 1,
        borderRadius: 5,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white',
        marginBottom: 10,
    },

    imgbg: {
        position: 'absolute',
        left: 10,
        top: 10,
        width: 20,
        height: 22
    },

    itemView: {
        borderBottomWidth: 1,
        borderBottomColor: '#DEDDDD',
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingLeft: 20,
        paddingRight: 20,
    },

    itemText: {
        height: 45,
        width: 280,
        lineHeight: 35,
        color: '#878787',
        fontSize: 15,
    },

    itemTextAction: {
        color: '#56ade0',
    },

    scrollBox: {
        height: 280,
        width: width,
        overflow: 'hidden',
    },

    scrollBoxCountry: {
        height: 400,
        width: width,
        overflow: 'hidden',
    },

      serviceAgreementArea: {
        marginTop:10,
        flexDirection:'row',
        overflow:'hidden',
      },

      iconOut: {
        width:16,
        borderRadius:3,
        borderWidth:1,
        borderColor:'#ccc',
        height:16,
        marginRight:5,
        overflow:'hidden',
      },

      iconIn: {
        color:'#333',
        marginLeft:1,
      },

      saText: {
        width:width-80,
        fontSize:14,
        height:50,
        color:'#999',
      },

      saTextLink: {
        color:'#333',
        width:50,
        height:20,
        fontSize:12,
      },

      button: {
        backgroundColor: '#999',
        borderRadius:5,
        height:40,
        overflow:'hidden',
        justifyContent:'center',
        marginTop:10,
      },

      buttonColor: {
        backgroundColor: '#56ade0',
      },

      buttonText: {
        color:'#fff',
        fontSize:18,
        textAlign:'center',
      },

      loginText: {
        height:30,
        width:width,
        marginTop:15,
        color:'#999',
      },

      loginTextButton: {
        color:'#56ade0'
      }
};

export const RegisterBStyle = {

      container: {
        flex: 1,
        backgroundColor:'#f5f7f8',
        width:width,
      },

      tabB: {
        paddingTop:20,
        paddingLeft:20,
        paddingRight:20
      },

      des: {
        color:'#666',
        fontSize:15,
        marginBottom:10,
      },

    input: {
        backgroundColor: '#fff',
        borderWidth: 1,
        borderColor: '#ccc',
        borderRadius: 3,
        height: 40,
        paddingLeft: 40,
        paddingRight: 10,
        fontSize: 14,
    },

    inputError: {
        borderColor: '#ff0000',
    },

    inputText: {
        marginTop: 10,
        marginBottom: 10,
    },

    imgbg: {
        position: 'absolute',
        left: 10,
        top: 10,
        width: 20,
        height: 22
    },

    button: {
        backgroundColor: '#999',
        borderRadius:5,
        height:40,
        overflow:'hidden',
        justifyContent:'center',
        marginTop:10,
    },

    buttonColor: {
        backgroundColor: '#56ade0',
    },

    buttonText: {
       color:'#fff',
       fontSize:18,
       textAlign:'center',
    },

};

export const ServiceAgreementStyle = {
     container: {
        flex: 1,
        width:width,
      },
};


export const CountryStyle = {
    itemView: {
        borderBottomWidth: 1,
        borderBottomColor: '#DEDDDD',
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingLeft: 20,
        paddingRight: 20,

    },

    itemText: {
        height: 45,
        width: 280,
        lineHeight: 35,
        color: '#878787',
        fontSize: 15,
    },

    itemTextAction: {
        color: '#56ade0',
    },
};

export const LoginStyle = {
    container: {
        flex: 1,
        backgroundColor: '#f5f7f8',
    },

    body: {
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 30,
    },

    forgotPassword: {
        paddingTop: 20,
        paddingBottom: 20,
        width: 300,
        flexDirection: 'row',
        justifyContent: 'flex-end',
    },

    forgotText: {
        fontSize: 14,
        color: '#999',
    },

    input: {
        backgroundColor: '#fff',
        borderWidth: 1,
        borderColor: '#ccc',
        borderRadius: 5,
        height: 40,
        width: 300,
        justifyContent: 'center',
        marginTop: 20,
        color: '#3FAFE4',
        paddingLeft: 15,
    },

    botton: {
        marginLeft: 10,
        marginRight: 10,
        backgroundColor: '#999',
        height: 40,
        width: 300,
        borderRadius: 5,
        justifyContent: 'center',
        alignItems: 'center',

    },

    submit: {
        fontSize: 16,
        color: '#fff',
    },

    joinfree: {
        width: 300,
        paddingTop: 20,
        paddingBottom: 20,
        flexDirection: 'row',
        justifyContent: 'center',
    },

    joinfreeText: {
        fontWeight: '700',
        color: '#3FAFE4',
        fontSize: 18,
    },

    centering: {
        alignItems: 'center',
        justifyContent: 'center',
    }
};

export const ForgotPasswordStyle = {
    container: {
        flex: 1,
        backgroundColor: '#f5f7f8',
    },

    body: {
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 30,
    },

    des: {
        fontSize: 14,
        color: '#999',
        width: 300,
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 10,
    },

    input: {
        backgroundColor: '#F6F8FA',
        borderWidth: 1,
        borderColor: '#ccc',
        borderRadius: 5,
        height: 40,
        width: 300,
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 20,
        color: '#3FAFE4',
        lineHeight: 30,
        fontSize: 20,
        paddingLeft: 15,
    },

    btn: {
        backgroundColor: '#999',
        height: 40,
        width: 300,
        borderRadius: 5,
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 20,
    },

    submit: {
        fontWeight: '700',
        color: '#fff',
        fontSize: 16,
        textAlign: 'center',
    },

    signIn: {
        marginTop: 20,
        width: 300,
        flexDirection: 'row',
        justifyContent: 'center',
    },

    signInText: {
        color: '#3FAFE4',
        fontWeight: '700',
        fontSize: 16,
    },
};

export const MyProfileStyle = {
    container: {
        flex: 1,
        backgroundColor: '#f5f7f8',
        paddingTop: 20,
    },

};

export const LetsMeetStyle = {
    container: {
        backgroundColor: "#fff",
        height: height,
        width: width,
    },

    card: {
        width: width - 20,
        height: 410,
        borderRadius: 5,
        borderWidth: 1,
        borderColor: "#e1e1e1",
        position: "absolute",
        left: 10,
        top: 70,
        backgroundColor: "#fff"
    },
    scard: {
        width: width - 20,
        height: 410,
        borderRadius: 5,
        borderWidth: 1,
        borderColor: "#e1e1e1",
        position: "relative",
        backgroundColor: "#fff",
        top: 13
    },
    cardInfo: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        height: 60,
        paddingLeft: 20,
        paddingRight: 5
    },
    cardText: {
        fontSize: 20,
        fontWeight: "500",
        color: "#423e39"
    },
};

export const BrowseStyle = {
    container: {
        backgroundColor: "#fff",
        height: height,
        width: width,
    },

    content: {
        flex:1,
        width:width,
    },

};

export const UserStyle = {
    userBox: {
        flexDirection: 'row',
        borderBottomWidth: 1,
        borderColor: '#dedede',
    },

    userBoxImg: {
        width: 60,
        height: 60,
        borderRadius: 5,
        margin: 5,
    },

    userBoxLeft: {
        marginLeft: 10,
        width: width - 100,
    },

    userBoxLeftText: {
        paddingTop: 3,   
        color:'#666',
    },

    color: {
        color: '#3FAFE4',
    }

};


export const MatchesStyle = {
    container: {
        backgroundColor: "#fff",
        height: height,
        width: width,
    },

    tabHead: {
        height:40,
        flexDirection: 'row',
        backgroundColor:'#fff',
    },

    tabNameView: {
        marginTop:10,
        flex:1,
        borderColor: '#ccc',
        borderLeftWidth:1,
        borderBottomWidth:1,
    },

    tabName: {     
        textAlign:'center',
        lineHeight:20, 
        color:'#666'
    },

    tabNameIndex: {
        borderBottomWidth:2,
        borderBottomColor:'#56ade0',
    },

    content: {
        flex:1,
        width:width,
    },

};

export const ConnectionsStyle = {
    container: {
        backgroundColor: "#fff",
        // height: height,
        // width: width,
    },

    tabHead: {
        height:40,
        flexDirection: 'row',
        backgroundColor:'#fff',
    },

    tabNameView: {
        marginTop:10,
        flex:1,
        borderColor: '#ccc',
        borderLeftWidth:1,
        borderBottomWidth:1,
    },

    tabName: {     
        textAlign:'center',
        lineHeight:20, 
        color:'#666'
    },

    tabNameIndex: {
        borderBottomWidth:2,
        borderBottomColor:'#56ade0',
    },

    content: {
        flex:1,
        width:width,

    },
};

export const SettingStyle = {
    container: {
        backgroundColor: "#fff",
        height:height,
        width:width,
        paddingLeft:10,
        paddingRight:10,
    },
  
    line: {
       height:60,
       borderBottomWidth:1,
       borderBottomColor:'#ccc', 
    },

    lineText: {
       fontSize:16,
       lineHeight:40,
    },

    version: {
       marginTop:30,
       fontSize:12,
       textAlign:'center',
    },


};

export const FilterStyle = {
    container: {
        flex: 1,
        backgroundColor: '#f5f7f8',
        width: width,
        paddingLeft: 10,
        paddingRight: 10,
    },

    text: {
        color: '#999',
        marginTop: 20,
        marginBottom: 10,
    },

    box: {
        borderLeftWidth: 1,
        borderTopWidth: 1,
        borderRightWidth: 1,
        borderColor: '#dedede',
    },

    right: {
        color: '#3FAFE4',
        paddingRight: 5,
        lineHeight: 28,
        textAlign: 'right',
    },

    rightMaxWidth: {        
        width: width - 90,
    },

    rightSwitch: {
        marginTop: 4, 
        marginRight: 5,
    },

    left: {
        color: '#999',
        paddingLeft: 5,
        lineHeight: 28,
    },

    line: {
        borderBottomWidth: 1,
        borderBottomColor: '#dedede',
        flexDirection: 'row',
        justifyContent: 'space-between',
        height: 40,
    },

    modalBox: {
        width: width,
        overflow: 'hidden',
    },

    modalMaxHeight: {
        height: 280,
    },

    itemView: {
        borderBottomWidth: 1,
        borderBottomColor: '#DEDDDD',
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingLeft: 20,
        paddingRight: 20,
    },

    itemText: {
        height: 45,
        width: 280,
        lineHeight: 35,
        color: '#878787',
        fontSize: 15,
    },

    itemTextAction: {
        color: '#56ade0',
    },

};

export const LocationStyle = {
    left: {
        color: '#999',
        paddingLeft: 5,
        lineHeight: 28,
    },

    right: {
        color: '#3FAFE4',
        paddingRight: 5,
        lineHeight: 28,
        textAlign: 'right',
    },

    line: {
        borderBottomWidth: 1,
        borderBottomColor: '#dedede',
        flexDirection: 'row',
        justifyContent: 'space-between',
        height: 40,
    },

    modalBox: {
        width: width,
        overflow: 'hidden',
    },

    modalMaxHeight: {
        height: 280,
    },

    itemView: {
        borderBottomWidth: 1,
        borderBottomColor: '#DEDDDD',
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingLeft: 20,
        paddingRight: 20,
    },

    itemText: {
        height: 45,
        width: 280,
        lineHeight: 35,
        color: '#878787',
        fontSize: 15,
    },

    itemTextAction: {
        color: '#56ade0',
    },
};
